<template>
  <div id="app" class="SKAreaIntimacy">
    <sk-life-table-header
      v-bind="$attrs"
      @dataFrom="getDataFrom"
      ref="skLifeTableHeader"
      :allClass="false"
    ></sk-life-table-header>
    <div class="left-circle-icon">
      <a-icon type="left-circle" @click="closeTable" style="font-size: 22px;" />
    </div>
    <Graph :data="data"  :wdith="'100%'" :height="'500px'"></Graph>
  </div>
</template>
<script>
import skLifeTableHeader from '@/components/skComponent/TableHeader.vue'
import Graph from "@/components/Echarts/Graph.vue";
import { getAction } from "@/api/manage.js";
export default {
  name: 'SKAreaIntimacy',
  data() {
    return {
      classId:"",
      dateType:"week",
      semesterId:"",
      url:'/management/skArea/getStudentRelationship',
      data:[],
    }
  },
  components: {
    skLifeTableHeader,
    Graph
  },
  props:{
    areaType:{
      type:Number,
      default:""
    }
  },  
  filters: {},

  computed: {},

  created() {},

  activated() {},

  mounted() {},

  methods: {
    getDataFrom(dataForm){
      if (dataForm.semesterId == "历史学期") {
        this.semesterId = dataForm.semesterId2;
      }else{
        this.semesterId = dataForm.semesterId;
      }
      if (dataForm.dateType == "historySem") {
        this.dateType = "sem"
      }else{
        this.dateType = dataForm.dateType;
      }
      this.classId = dataForm.classId;
      this.getAreaDuration();
    },
    getAreaDuration(){
      let params = {
        timeScope:this.dateType=="sem"?this.semesterId:this.dateType,
        // areaType:this.areaType,
        areaType:1,
        classId:this.classId == "0" ?null:this.classId,
        // classId:"1630044584086220802",
      }
      let url = this.url;
      this.data = []
      getAction(url,params).then((res)=>{
        if(res.success){
          let data = res.result.studentData.map(item=>{
            return {
              name:item.studentName,
              id:item.studentId
            }
          })
          let linksData = res.result.studentLinks.map(item=>{
            return {
              target:item.target,
              source:item.source,
              relationshipRate:Number(item.relationshipRate * 100).toFixed(2) + "%"
            }
          })
          this.data.push(data,linksData)
        } else {
          this.$message.warning(res.message);
        }
        this.tableLoading1 = false;
      }).catch((error)=>{
        console.error(error);
      })
    },
    // 关闭表格页面
    closeTable() {
      let data = {
        show: true,
        IntimacyShow:true,
      }
      this.$emit('areaTableData', data)
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.left-circle-icon {
  width: 100%;
  text-align: right;
  margin: 10px 0;
  cursor: pointer;
}
</style>
